---
name: Checkbox Group
menu: Components
---

# Checkbox Group
import { CheckGroup } from './index'
import Button from '../button/index'
import { Playground, Props } from 'docz'
import './style/index.scss'
import Icon from '../icon/index';
import '../icon/style/index.scss';

## Props & Methods
<Props of={CheckGroup} />

## Inline Display
<Playground>
{() => {
    const myOptions = [
        {
            label: 'Option 1',
            id: 1,
        },
        {
            label: 'Option 2',
            id: 2,
        },
        {
            label: 'Option 3',
            id: 3
        }
    ];
    return <><CheckGroup
            options={myOptions}
            inline={true}
          />
          <div style={{height: '10px'}}></div>
          <CheckGroup
            options={myOptions}
            inline={false}
          />
          </>
    }
}
</Playground>

## Options
<Playground>
{() => {
    const myOptions = [
         {
            label: 'Default Option',
            id: 1,
        },
        {
            label: 'Disabled Option',
            id: 2,
            disabled: true
        },
        {
            label: (<span>Option with Icon Label<Icon type="weixin" /></span>),
            id: 3
        }
    ];
    return <CheckGroup
            options={myOptions}
            />
}
}
</Playground>

## Values
<Playground>
{() => {
    const myOptions = [
         {
            label: 'Default Option',
            id: 1,
        },
        {
            label: 'Checked Option',
            id: 2,
        },
        {
            label: 'Ckecked & Disabled Option',
            id: 3,
            disabled: true
        },
    ];
    const myValues = [2, 3]
    return <CheckGroup
            options={myOptions}
            value={myValues}
            />
    }
}
</Playground>

## Onchange
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                values: [],
            }
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(ids){
            this.setState({
                values: ids
            });
        }
        render(){
            const myOptions = [
                {
                    label: 'Option 1',
                    id: 1,
                },
                {
                    label: 'Option 2',
                    id: 2,
                },
                {
                    label: 'Option 3',
                    id: 3
                }
            ];
            return  <>
                        <CheckGroup
                        options={myOptions}
                        value={this.state.values}
                        onChange={this.handleChange}
                        />
                        <p>The id list you just checked：{JSON.stringify(this.state.values)}</p>
                    </>
        }
    }
    return <Example/>
}
}
</Playground>